<template>
    <li class="intro-box">
        <div class="bgWra">
            <img :src="meminfo.avatar | avatar" class="bg-img">
        </div>
        <img :src="meminfo.avatar | avatar" class="head img-circle">
        <p class="name">{{meminfo.username}}</p>
        <p class="job">{{meminfo.department | department}}{{meminfo.position | position}}</p>
        <p class="more-detail">{{meminfo.mobile}}</p>
        <hr>
        <p class="more-detail">{{meminfo.mail}}</p>
        <hr>
        <p class="more-detail">{{meminfo.classid}}</p>
        <hr>
        <p class="more-detail">{{meminfo.dep}}</p>
    </li>
</template>
<style>
    .intro-box{
        width: 200px;
        height: 280px;
        border: 1px solid #ededed;
        position: relative;
        border-radius: 4px;
        box-shadow:3px 3px 5px #ededed;
        margin:30px 0 0 90px;
        float:left;
        overflow: hidden;
    }
    .intro-box .bgWra{
        height: 160px;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 110%;
    }
    .intro-box .bg-img{
        width: 100%;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
        top:0;left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        z-index: -1;
    }
    .intro-box .head{
        width: 75px;height: 75px;
        display: block;
        margin:28px auto 0 auto;
        border: 2px solid #fff
    }
    .intro-box .name{
        font-size: 18px;
        color: #fff;
        text-align: center;
        margin-bottom: 3px;
        margin-top: 3px;
    }
    .intro-box .job{
        font-size: 14px;
        color: #fff;
        text-align: center;
        margin-bottom: 13px;
    }
    .intro-box hr{
        margin:3px auto;
        height: 1px;
        width: 130px;
        background-color: #dadada;
    }
    .intro-box .more-detail{
        font-size: 14px;
        height:20px;
        line-height: 20px;
        color: #181818;
        text-align: center;
        margin:0;
    }
</style>
<script>
    import Vue from 'vue';
    Vue.filter('department', function(value){
        var dep_list = ['eux','前端美工组','后台web组','影视部','市场部','新闻部','新媒体部','产品部','公关部'];
        return dep_list[parseInt(value)];
    });
    Vue.filter('position', function(value){
        var pos_list = ['管理员', 'CEO', '总监', '主管', '员工'];
        switch (value){
            case 0: return pos_list[0];
            case 1: return pos_list[1];
            case 2: return pos_list[2];
            case 4: return pos_list[3];
            case 6: return pos_list[4];
        }
    });
    Vue.filter('avatar', function(value){
        var ava_list = ['/dist/img/user/avatar1.jpg','/dist/img/user/avatar2.jpg','/dist/img/user/avatar3.jpg','/dist/img/user/avatar4.jpg','/dist/img/user/avatar5.jpg','/dist/img/user/avatar6.jpg','/dist/img/user/avatar.jpg7','/dist/img/user/avatar8.jpg','/dist/img/user/avatar9.jpg','/dist/img/user/avatar10.jpg','/dist/img/user/avatar11.jpg','/dist/img/user/avatar12.jpg'];
        return ava_list[parseInt(value)];
    });
    export default{
        data(){
            return{
                job: "eux主管,",
                mobile: "18292876059",
                email: "1121264060@qq.com",
                major: "过程装备与控制工程",
                college: "仲英书院",
                ava_url: "/dist/img/admin/imageP4.png"
            }
        },
        created: function(){
            // console.log(this.meminfo);
        },
        computed: {
            name(){
                return this.meminfo.username;
            }
        },
        props: {
            meminfo: Object
        }
    }
</script>
